<template>
	<w-container :loading="loading">
		<w-navbar left-icon="arrow-left" title="往期数据" :titleStyle="{color:'#fff'}" bgColor="#1B52F5">
			<template v-if="selectData.length" #right>
				<picker :range="selectData" range-key="name" @change="changeNumber">
					<view  class="font-color-white font-size-14 flex flex-ai-center">
						<view class="mr-6">第{{ current + 1 }}期</view>
						<w-icon name="daosahnjiao-white" size="9"></w-icon>
					</view>
				</picker>
			</template>
		</w-navbar>
		<view v-if="selectData.length && info" class="pa-16">
			<view class="flex flex-ai-center flex-js-sb font-color-white font-w-bold font-size-14">
				<view >结束时间 </view>
				<view>{{ info.e_time | formatDate }}</view>
			</view>
			<view class="item-box bg-color-white mt-18">
				<w-image src="/static/bg/benqijiangci-text.png" width="110.75" mode="widthFix"></w-image>
				<view class="flex flex-ai-center flex-js-sb flex-w">
					<view v-for="(item,index) in vote_reward" :key="index" class="goods-item-box flex flex-dir-col flex-ai-center">
						<w-image :src="item.fm_image" width="150" height="150" radius="12"></w-image>
						<view class="font-w-500 font-size-14 font-color-222 mt-10 text-overflow">{{ item.reward_title }}</view>
					</view>
				</view>
			</view>
			<view class="item-box bg-color-white mt-18">
				<w-image src="/static/bg/houshenghuawang.png" width="115.45" mode="widthFix"></w-image>
				<view v-for="(item,index) in flower_win" :key="index" class="flex flex-ai-center flex-js-sb mt-20">
					<view class="flex flex-ai-center">
						<w-icon :name="`number-${index + 1}`" size="24"></w-icon>
						<w-image  class="ml-16" :src="item.avatar" width="60" height="60" radius="12"></w-image>
						<view class="flex flex-dir-col ml-17">
							<view class="flex flex-ai-center">
								<view class="font-color-222 font-w-bold font-size-14 mr-7">{{ item.all_count }}</view>
								<w-image src="/static/bg/hua-bg.png" width="20" height="39" mode="aspectFit"></w-image>
							</view>
							<view class="font-size-10" style="color: #939393;">为ta送花 {{ item.count }}</view>
						</view>
					</view>
					<w-icon :name="`dengji-${index + 1}`" size="42"></w-icon>
				</view>
				<w-loading v-if="!flower_win.length" emptyTop="30" type="empty" emptyType="blade"></w-loading>
			</view>
			<view class="item-box bg-color-white mt-18">
				<w-image src="/static/bg/huoshengdaowang.png" width="115.45" mode="widthFix"></w-image>
				<view v-for="(item,index) in knife_win" :key="index" class="flex flex-ai-center flex-js-sb mt-20">
					<view class="flex flex-ai-center">
						<w-icon :name="`number-${index + 1}`" size="24"></w-icon>
						<w-image  class="ml-16" :src="item.avatar" width="60" height="60" radius="12"></w-image>
						<view class="flex flex-dir-col ml-17">
							<view class="flex flex-ai-center">
								<view class="font-color-222 font-w-bold font-size-14 mr-7">{{ item.all_count }}</view>
								<w-image src="/static/bg/dao-bg.png" width="20" height="39" mode="aspectFit"></w-image>
							</view>
							<view class="font-size-10" style="color: #939393;">为ta送刀 {{ item.count }}</view>
						</view>
					</view>
					<w-icon :name="`dengji-${index + 1}`" size="42"></w-icon>
				</view>
				<w-loading v-if="!knife_win.length" emptyTop="30" type="empty" emptyType="blade"></w-loading>
			</view>
			<u-gap height="10"></u-gap>
		</view>
	</w-container>	
</template>

<script>
	import {  voteIndex,lastList } from "@/api/bladeMonarch/index.js"
	export default {
		data() {
			return {
				selectData:[],
				loading:true,
				current:0,
				info:null,
				vote_reward:[],
				knife_win:[],
				flower_win:[]
			}
		},
		onLoad() {
			this.getLastList()
		},
		methods: {
			changeNumber(e){
				console.log(e);
				this.current = e.detail.value
				this.getCurrentInfo()
			},
			async getLastList(){
				this.current = 0
				try {
					const { data,code } = await lastList()
					if(code != 1) return
					this.selectData = data.map((item,index) => {
						return {
							name:`第${index + 1}期`,
							id:item
						}
					})
					this.getCurrentInfo()
				} catch (e) {
					setTimeout(() => uni.navigateBack(),1000)
				} finally {
					// this.loading = false
				}
			},
			async getCurrentInfo(){
				this.loading = true
				this.info = null
				if(!this.selectData.length) return this.loading = false
				let id = this.selectData[this.current]?.id
				try {
					const { data,code } = await voteIndex({id})
					if(code != 1) return
					this.info = data.data
					this.vote_reward = data.vote_reward
					this.flower_win = data.flower_win
					this.knife_win = data.knife_win
				} catch (e) {
					setTimeout(() => uni.navigateBack(),1000)
				} finally {
					this.loading = false
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #1B52F5;
	}
</style>
<style lang="scss" scoped>
	.item-box {
		padding: 19px 16px 20px;
		border-radius: 15px;
		.goods-item-box {
			width: 48.5%;
			margin-top: 40rpx;		
		}
	}	
</style>
